<template>
  <div class="wrapper">
    <el-row :gutter="10" style="z-index:200;margin-top:10px">
      <el-col :xs="22" :lg="22" :offset="2">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item v-for="(item,index) in bread" :key="index" :to="{path:item.path}">
            <span>{{item.name}}</span>
          </el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>
    </el-row>
    <el-row :gutter="10" style="z-index:200;margin-top:30px;background:white;margin-bottom:150px">
      <el-col :xs="22" :lg="22" :offset="2">
        <div class="upload">
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <el-upload
            class="avatar-uploader"
            action="https://jsonplaceholder.typicode.com/posts/"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <i class="el-icon-plus avatar-uploader-icon"></i>
            <span class="tip">上传头像</span>
          </el-upload>
          <div class="userInfo">
            <div>
              <span
                style="font-size:15px;font-weight:bold;cursor:pointer"
                @click="follower=false;activeName='first'"
              >{{user.nickName}}</span>
              <span style="cursor:pointer;padding-left:5px;color:grey" @click="handleedit">
                <span class="iconfont">&#xe7e3;</span>编辑资料
              </span>
            </div>
            <div style="margin-top:40px;">
              <span @click="showFollower('follower')" style="cursor:pointer">
                <i class="iconfont">&#xe6d8;</i> 关注
                <i style="cursor:pointer;color:#409EFF">{{user.follow}}</i>
              </span>
              <span class="slash"></span>
              <span style="margin-left:20px;cursor:pointer" @click="showFollower('fans')">
                <i class="iconfont">&#xe6d9;</i> 粉丝
                <i style="cursor:pointer;color:#409EFF">{{user.follower}}</i>
              </span>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="22" :lg="21" :offset="2" style="margin-top:20px">
        <el-tabs
          type="border-card"
          @tab-click="handleClick"
          v-model="activeName"
          v-show="!follower"
        >
          <el-tab-pane name="first">
            <span slot="label">
              <i class="iconfont">&#xe633;</i> 课程评价
            </span>
            <div v-for="(item, index) in lists" :key="index" style="margin:40px 0">
              <div>三节课产品经理
                <el-rate
                  v-model="item.score"
                  disabled
                  style="display:inline-block;padding-left:10px"
                  show-score
                  text-color="#ff9900"
                  score-template="{value}"
                ></el-rate>
                <span style="float:right">{{item.createAt|formatTime('YMDHMS')}}</span>
              </div>
              <div style="margin-top:20px">
                <span style="line-height:30px">{{item.content|readmore(100,'.....')}}</span>
                <span style="color:#409EFF;cursor:pointer" @click="checkDetail(item)">
                  <i class="iconfont">&#xe675;</i> 查看详情
                </span>
              </div>
              <div class="detailrates">
                <span style="cursor:pointer" @click="showItemComment(item)">
                  {{item.commentNum}}
                  <i class="iconfont">&#xe675;</i>
                </span>
                <span style="cursor:pointer">
                  {{item.userLike}}
                  <i class="iconfont">&#xe7c8;</i>
                </span>
                <span style="cursor:pointer">
                  {{item.userDislike}}
                  <i class="iconfont">&#xe7c9;</i>
                </span>
              </div>
              <div v-show="item.showComment" class="showComment">
                <div>
                  <h1>{{item.commentNum}}条评论</h1>
                  <span>
                    <el-button type="text" style="float:right" @click="item.showComment=false">
                      <span class="iconfont">&#xe782;</span> 收起
                    </el-button>
                  </span>
                </div>
                <div
                  v-for="(childs,childindex) of item.commentsDetail"
                  :key="childindex+'commentNum'"
                  style="margin:10px 0"
                >
                  <div class="commentsDetail">
                    <div>
                      <img :src="childs.avatar" alt style="width:70px;height:70px;">
                    </div>
                    <div
                      style="display:flex;flex-direction:column;justify-content:space-around;margin:0 20px"
                    >
                      <div>{{childs.nickName}}</div>
                      <div>{{childs.issueTime|formatTime('YMDHMS')}}</div>
                    </div>
                    <div
                      style="display:flex;flex-direction:column;justify-content:space-around;margin:0 20px"
                    >
                      <div>:{{childs.content}}</div>
                      <div>
                        <span class="iconfont" @click="likeIt(childs)">&#xe7c8; {{childs.userLike}}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="100"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            ></el-pagination>
          </el-tab-pane>
          <el-tab-pane name="second">
            <span slot="label">
              <i class="iconfont">&#xe79a;</i> 课程收藏
            </span>
            <div v-for="(item, index) in save" :key="index" style="margin:40px 0">
              <div class="saveContent">
                <div
                  style="border:1px dashed #DCDFE6;text-align:center;cursor:pointer"
                  @click="handleTitle(item)"
                >
                  <img :src="item.cover" style="width:100%;height:150px">
                </div>
                <div style="margin-left:40px">
                  <div class="title" @click="handleTitle(item)">
                    <a>{{item.title}}</a>
                  </div>
                  <div class="second">{{item.comScore}}</div>
                  <div class="third">￥{{item.officialPrice}}</div>
                </div>
                <div>
                  <div style="float:right">{{item.createAt|formatTime('YMDHMS')}}</div>
                  <div>
                    <el-button type="primary" @click="saveas(item)">
                      <i class="iconfont">&#xe7df;</i> 取消收藏
                    </el-button>
                    <el-button type="primary" @click="linkto">
                      <i class="iconfont">&#xe677;</i> 学习课程
                    </el-button>
                    <el-button type="primary" @click="editCommets(item)">
                      <i class="iconfont">&#xe7e3;</i> 撰写课评
                    </el-button>
                  </div>
                </div>
              </div>
            </div>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="100"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            ></el-pagination>
          </el-tab-pane>
        </el-tabs>
        <el-tabs type="border-card" @tab-click="handleClick" v-model="activeName" v-show="follower">
          <el-tab-pane name="follower">
            <span slot="label">
              <i class="iconfont">&#xe633;</i> 关注
            </span>
            <div style="display:flex;flex-wrap:wrap">
              <div v-for="(item,index) in follow" :key="index" style="width:20%;margin:10px 0 0 0">
                <div>
                  <img
                    :src="item.avatar"
                    style="width:60px;height:60px;float:left;margin-right:10px"
                  @click="seePersonal(item,index)">
                  <div>
                    <div @click="seePersonal(item,index)" style="cursor:pointer">{{item.nickName}}</div>
                    <div>
                      <el-button type="text" @click="unfollow(item,index)">取消关注</el-button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="100"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            ></el-pagination>
          </el-tab-pane>
          <el-tab-pane name="fans">
            <span slot="label">
              <i class="iconfont">&#xe79a;</i> 粉丝
            </span>
            <div style="display:flex;flex-wrap:wrap">
              <div v-for="(item,index) in fans" :key="index" style="width:20%;margin:10px 0 0 0">
                <div>
                  <img
                    :src="item.avatar"
                    style="width:60px;height:60px;float:left;margin-right:10px"
                  >
                  <div>
                    <div>{{item.nickName}}</div>
                    <div>
                      <el-button type="text" @click="unfollow(item,index)" v-if="item.type">取消关注</el-button>
                      <el-button type="text" @click="giveAttention(item,index)" v-if="!item.type">关注</el-button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="100"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            ></el-pagination>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  getUserInfo,
  getUserInfoDetail,
  getPersonalComment,
  getCourseCollection,
  getFollower,
  getfollowing,
  changePassWord,
  getcommentList
} from "@/api/ajax";
import axios from "axios";
export default {
  name: "PersonalCenter",
  data() {
    return {
      follower: false,
      imageUrl: "",
      user: {
        nickName: "用户001",
        follower: 20,
        follow: 10
      },
      page: "",
      size: "",
      currentPage: 1,
      total: 20,
      bread: [
        {
          path: "/",
          name: "首页"
        }
      ],
      activeName: "first",
      lists: [],
      save: [],
      fans: [],
      follow: [],
      name: ""
    };
  },
  components: {},
  methods: {
    getPersonalData: function() {
      this.name = localStorage.getItem("name");
      this.bread.push({
        path: `/PersonalCenter`,
        name: "个人中心"
      });
      getUserInfoDetail().then(res => {
        this.imageUrl = res.data.data.avatar;
        this.user.nickName = res.data.data.nickName;
        this.user.follow = res.data.data.following;
        this.user.follower = res.data.data.fansNum;
        this.user.id = res.data.data.id;
      });
      getPersonalComment().then(res => {
        _(res.data.data.rows).forEach((v, i, att) => {
          v.score = v.score / 2;
          v.publish = false;
          v.showComment = false;
          v.commentsDetail = {};
        });
        this.lists = res.data.data.rows;
        this.currentPage = res.data.data.page;
        this.total = res.data.data.total;
      });
      getCourseCollection().then(res => {
        this.save = res.data.data.rows;
      });
      getFollower().then(res => {
        this.fans = res.data.data.rows;
      });
      getfollowing().then(res => {
        this.follow = res.data.data.rows;
      });
    },
    showItemComment(item) {
      if (item.commentNum > 0) {
        item.showComment = true;
        let params = {};
        let id = item.id;
        getcommentList(id, params).then(res => {
          if (res.data.code == 0) {
            item.commentsDetail = res.data.data.rows;
          }
        });
      }
    },
    checkDetail(v) {
      this.$bus.$emit("pushItem", "课评");
      if (this.bread.length == 0) {
        this.$router.push({
          name: "personalcomments",
          params: {
            item: JSON.stringify(v),
            nope: JSON.stringify(this.nope)
          }
        });
      } else {
        this.$router.push({
          name: "personalcomments",
          query: {
            item: JSON.stringify(v),
            bread: JSON.stringify(this.bread)
          }
        });
      }
    },
    unfollow: function(item, index) {
      let params = {};
      params.toUserId = item.id;
      params.action = 0;
      let token = "";
      if (localStorage.getItem("token")) {
        token = localStorage.getItem("token");
      }
      axios({
        method: "post",
        params: params,
        url: "account/a/h/api/user/uurelation",
        headers: {
          "Content-Type": "application/json",
          token: token
        }
      }).then(res => {
        if (res.data.code != 0) {
          this.$message.error(res.data.msg);
        } else {
          this.$message({
            message: "取关成功",
            type: "success"
          });
        }
      });
      this.follow.splice(index, 1);
    },
    giveAttention(item,index){
      
    },
    beforeAvatarUpload: function() {},
    handleAvatarSuccess: function() {},
    handleClick: function() {},
    handleSizeChange: function(val) {
      let params = {};
      params.pagesize = val;
      if (this.page) {
        params.page = this.currentPage;
      }
      getPersonalComment(params).then(res => {
        _(res.data.data.rows).forEach((v, i, att) => {
          v.score = v.score / 2;
          v.publish = false;
          v.showComment = false;
          v.commentsDetail = {};
        });
        this.lists = res.data.data.rows;
        this.size = res.data.data.pagesize;
        this.currentPage = res.data.data.page;
        this.total = res.data.data.total;
      });
    },
    handleCurrentChange: function(val) {
      let params = {};
      params.page = val;
      if (this.size) {
        params.pagesize = this.size;
      }
      getPersonalComment(params).then(res => {
        _(res.data.data.rows).forEach((v, i, att) => {
          v.score = v.score / 2;
          v.publish = false;
          v.showComment = false;
          v.commentsDetail = {};
        });
        this.lists = res.data.data.rows;
        this.size = res.data.data.pagesize;
        this.currentPage = res.data.data.page;
        this.total = res.data.data.total;
      });
    },
    handleTitle: function(item) {
      if (this.bread) {
        this.$router.push({
          name: "classDetail",
          query: {
            item: JSON.stringify(item),
            id: item.id,
            breads: JSON.stringify(this.bread)
          }
        });
      } else {
        let bread = [
          {
            path: "/",
            name: "首页"
          }
        ];
        this.$router.push({
          name: "classDetail",
          query: {
            item: JSON.stringify(item),
            id: item.id,
            breads: JSON.stringify(bread)
          }
        });
      }
    },
    showFollower: function(type) {
      this.follower = true;
      this.activeName = type;
    },
    handleedit: function() {
      this.$router.push({
        name: "editPersonal"
      });
    },
    saveas(item) {
      let params = {};
      params.action = 0;
      if (!localStorage.getItem("token")) {
        this.$message.error("请登录");
        this.$bus.$emit("loginModal");
      } else {
        axios({
          method: "post",
          url: `account/a/h/course/${item.id}/api/collection/?action=${
            params.action
          }`,
          headers: {
            "Content-type": "application/json",
            token: localStorage.getItem("token")
          }
        }).then(res => {
          if (res.data.code == 0) {
            let msg = "取消成功";
            this.$message({
              showClose: true,
              message: msg,
              duration: 2000,
              type: "success"
            });
            getCourseCollection().then(res => {
              this.save = res.data.data.rows;
            });
          } else {
            this.$message({
              showClose: true,
              message: res.data.msg,
              duration: 2000,
              type: "error"
            });
          }
        });
      }
    },
    linkto() {
      window.open("http://www.baidu.com");
    },
    editCommets(item) {
      this.bread.push({
        path: "writePersonComments",
        name: "发表课评"
      });
      this.$router.push({
        name: "writePersonComments",
        query: { item: JSON.stringify(item),bread:JSON.stringify(this.bread) }
      });
    },
    seePersonal(item,index){
      
    }
  },
  mounted() {
    this.getPersonalData();
  }
};
</script>

<style lang="less" scoped>
@import "~styles/z.less";
@import "~styles/css3.less";
@import "~styles/variables.less";
.wrapper {
  .showComment {
    min-height: 300px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27),
      0 0 40px rgba(0, 0, 0, 0.06) inset;
    margin: 10px 0;
    width: 93%;
    padding: 20px;
  }
  .commentsDetail {
    display: flex;
  }
  .upload {
    display: flex;
    width: 30%;
    justify-content: space-between;
    .userInfo {
      display: flex;
      .rel;
      flex-direction: column;
      justify-content: space-around;
      .slash {
        .slash;
        .abs;
        top: 137px;
        left: 78px;
      }
    }
    .avatar-uploader {
      .rel;
      margin-left: -180px;
      margin-top: 147px;
      .tip {
        .abs;
        .dib;
        z-index: 10;
        bottom: 0;
        right: 0;
        height: 30px;
        line-height: 30px;
        width: 90px;
        background: rgba(242, 242, 242, 0.639215);
      }
      /deep/ .el-upload {
        border: 1px dashed #8c939d;
        height: 30px;
        line-height: 30px;
        width: 90px;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        &:hover {
          border-color: #409eff;
        }
      }
    }
  }
  .detailrates {
    margin: 40px 0;
    text-align: right;
    & span {
      display: inline-block;
      width: 100px;
      cursor: pointer;
      &:hover {
        color: #409eff;
      }
    }
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .saveContent {
    display: flex;
    padding: 0 0 20px 0;
    border-bottom: 1px solid #dcdfe6;
    & > div {
      width: 20%;
      .dib;
    }
    & > div:nth-of-type(2) {
      width: 15%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 20px 0;
    }
    & > div:last-child {
      padding: 20px 0 10px 0;
      width: 60%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-end;
    }
    .title {
      .MainFont;
      cursor: pointer;
      a {
        color: #409eff;
        white-space: nowrap;
      }
      &:hover a {
        text-decoration: underline;
      }
    }
    .second {
      .MainFont;
      color: #e6a23c;
      cursor: pointer;
    }
    .third {
      .MainFont;
      cursor: pointer;
    }
  }
}
</style>
